import list from './data.js';
import './index.css';
// let content = document.querySelector('.content');
let ul = document.querySelector('.content > ul');
let loading = document.querySelector('.loading');
// let footer = document.querySelector('.footer');
let body = document.querySelector('body');

let count = 0;
let flag = 0;

function rendered() {
    let batchSize = 8;
    let endIndex = Math.min(count + batchSize, list.length);

    for (let i = count; i < endIndex; i++) {
        let listItem = document.createElement('li');
        listItem.innerHTML = `
      <img src="${list[i].pic}" />
      <p>活动：${list[i].name}</p>
      <p>地址：${list[i].address}</p>
      <p>时间：${list[i].showTime}</p>
      <p>价格：${list[i].price}</p>
    `;
        ul.appendChild(listItem);
    }

    count += batchSize;
}

function handleScroll() {
    let scrollTop = document.documentElement.scrollTop;
    let pageHeight = body.offsetHeight;
    let windowHeight = window.innerHeight;

    if (
        !flag &&
        scrollTop + 200 + windowHeight >= pageHeight &&
        count < list.length - 1
    ) {
        flag = 1;
        loading.classList.add('active');

        setTimeout(() => {
            loading.classList.remove('active');
            rendered();
            flag = 0;
        }, 1000);
    }
}
// window.addEventListener('scroll',()=>{
//   let docScrollTop = document.documentElement.scrollTop
//   let docHeight = document.documentElement.clientHeight
//   if(docScrollTop+docHeight>= ul.offsetTop+ul.offsetHeight){
//     console.log("到了");
//     loading.classList.add('active')
//   }
// })

ul.innerHTML = '';
rendered();

window.addEventListener('scroll', handleScroll);
